<template>
	<div class="header">
		<div class="header-header">			
				<router-link to="/">
					<span class="iconfont" style="color: white;">&#xe502;</span>
				</router-link>
				<span class="txt">自由行</span>			
				<span class="txt1" @click="toHome()">全部商品</span><br>
		</div>	
			<div class="header-search">
				<span class="iconfont">&#xe632;</span>
				<span>搜索目的地/折扣/关键词</span>
			</div>	
	</div>
	
</template>

<script>
	export default{
		methods:{
			toHome(){
				// this.$router.push() 在js内设置页面跳转地址的方法，没有参数直接编写跳转地址 如果有参数。设置path选项，参数选项【query直接写入path的地址内。params方法设置params参数选项】
				this.$router.push('/')
				}
		}
	}
</script>



<!-- sconped 局部样式-->
<style scoped>
	.header{
		width: 100%;		
		background-color: green;
		color: white;
		font-size: 0.36rem;/* 0.36rem */	
			padding-bottom: 0.3rem;
	}
	.header-header{
		height: 0.9rem;
		line-height: 0.9rem;
	}
	.txt{
		margin-left: 0.3rem;
		float: left;
		font-size: 0.3rem;
	}
	.iconfont{
		margin-left: 0.2rem;
		float: left;
	}
	.txt1{
		color: white;
		float: right;
		padding-right: 0.2rem;
		font-size: 0.2rem;
	}
	.header-search{
		background-color: white;
		height: 0.8rem;
		color: gainsboro;
		line-height: 0.8rem;
		font-size: 0.28rem;		
		width: 90%;
		margin: 0rem auto;	
		margin-top: 0.2rem;
		text-align: left;
	}
</style>

